<script setup>
import MaterialButton from "@/components/MaterialButton.vue";

defineProps({
    icon: {
        type: [String, Object],
        default: "",
        component: String,
        size: String,
        color: String,
    },
    image: {
        type: Object,
        component: String,
        class: String,
        default: () => {},
    },
    title: {
        type: [String, Object],
        required: true,
        text: String,
        class: String,
    },
    description: {
        type: [String, Object],
        required: true,
        text: String,
        class: String,
    },
    col: {
        type: String,
        default: "",
    },
});
</script>
<script>
export default {
    inheritAttrs: false,
};
</script>
<template>
    <div :class="`${col ? col : 'col-md-6'} info-box`" style="height: 100%">
        <div v-bind="$attrs" class="info">
            <i v-if="icon" class="material-icons text-gradient" :class="`${typeof icon == 'object' ? `text-${icon.color} text-${icon.size}` : 'text-success text-3xl'}`">{{ typeof icon == "object" ? icon.component : icon }}</i>
            <img v-if="image" :src="image.component" :class="image.class" />
            <h1 :class="`${typeof title == 'string' ? 'font-weight-bolder' : title.class} text-f-ERASBD`">
                {{ typeof title == "string" ? title : title.text }}
            </h1>
            <p v-if="typeof description == 'string'" v-html="description" class="anim-opacity2 mt-4" style="font-family: Microsoft YaHei, Microsoft YaHei; font-weight: 700; font-size: 16px; color: #000000; line-height: 24px; text-shadow: 0px 6px 50px rgba(0, 0, 0, 0.8)"></p>
            <div v-else>
                <h5 v-if="description.title" class="anim-opacity2">
                    {{ description.title }}
                </h5>
                <p :style="description.style" class="anim-opacity2" v-html="description.text"></p>
            </div>
            <MaterialButton class="bg-red" @click="router.push(`/pages/landing-pages/about-us?type=1`)">LEARN MORE</MaterialButton>
        </div>
    </div>
</template>
<style scoped>
@media (min-width: 991.98px) {
    .info-box {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>
